<!-- 大厂内推列表 -->
<template>
	<view class="page">
		<view class="content">
			<view class="height">
					<view class="position px-3 flex justify-between align-center">
							<view class="title flex justify-center align-center flex-column">
								<view class="text">
									全部职位
								</view>
								<view class="icon">
								
								</view>
							</view>
							<!-- <view class="screening flex justify-between" @click="screening">
								<view class="text">
									筛选
								</view>
								<view class="icon">
									<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/shaixuan.png" mode=""
										lazy-load></image>
								</view>
							</view> -->
						</view>
						
					<switch-link name1="附近" name2="最新" :cur="current" @curren="curren"></switch-link>				
					</view>
					<view class="recruitment"
						:style="{'height': `calc(100vh - 50px - env(safe-area-inset-bottom))`}">
						<swiper class="swiper" @change="swiper" :scroll-top="top1" @scrolltolower="scrollToLower1" @scrolltoupper='scrollToUpper1' lower-threshold='30' upper-threshold='0'>
							<swiper-item>
								<scroll-view class="scroll-view" scroll-y="true" @scroll.stop="scroll">
									<view class="list" v-for="item in leftList" :key="item.positionListId" @click.stop="linkDetail(item)">
										<list :companyShow="companyShow" :item="item" @chan="chan1"></list>
										<view class="line" style="height: 20rpx;background-color: #f5f5f5;line-height: 0;">
					
										</view>
									</view>
									<loading :load1="load1" :load2="2" :load3="2"></loading>
								</scroll-view>
								
							</swiper-item>
						</swiper>
					</view>
				
			</view>
			<Screening v-if="shaw" @select="select"></Screening>
	</view>
</template>

<script>
	import List from '@/components/list/list.vue' //	list组件
	import Linkage from '@/components/linkage/linkage.vue'
	import SwitchLink from '@/components/switch/switch.vue'
	import Screening from '@/components/screening/screening.vue'
	import Loading from '@/components/loading/loading.vue'
	import {
		rightList,
		leftList,
		detail
	} from '@/data/chance.js' // 假数据
	export default {
		components: {
			List,
			Linkage,
			SwitchLink,
			Screening,
			Loading
		},
		data() {
			return {
				cityTitle:'杭州',
				tabbar: this.$store.state.list, //tabbar数据
				tabbarTop: 0,
				tabbarHeight: 0,
				background: {
					background: 'linear-gradient(135deg, #1C79F8, #0265EB)' //顶部导航背景色
				},
				options: [],
				load1: 2,
				shaw:false,
				current: 0,
				searchHeight: 0,
				topHeight: 0,
				show: false,
				rightList:[] ,
				leftList:[] ,
				companyShow: true,
				scrollHeight: 0,
				listQurey:{
					pageNum:1,
					pageSize:5,
					type:0,
					companyId:Number,
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.init()
			this.getData()
			console.log(this.topHeight)
		},
		onShow() {
	
		},
		methods: {
			//初始化
			init() {
				this._getTabbarHeight()
				this._setTabbarTitleHeight()
				this.scrollHeight = this.searchHeight + this.tabbarHeight
			},
			scrollToLower1(){
				if(this.load1 !=1){
					this.listQurey.pageNum+=1
					this.getData()
				}
				
			},
			async getData(){
				this.listQurey.companyId = uni.getStorageSync('pageNum')
				let {data: list,code} = await this.$get('/positionList/page',this.listQurey)
				if(code == 200){
					if(this.listQurey.pageNum == 1){
						if(list.records.length!=10){
							this.load1 = 1
						}else{
							this.load1 = 0
						}
					}else{
						if(list.records.length!=0){
							this.load1 = 0
						}else{
							this.load1 = 1
						}
					}
					
					this.leftList = this.leftList.concat(list.records) 
				}
			},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top
				this.tabbarHeight = top.bottom + 10
			},
			//tabbar切换前的回调
			click(e) {
				return true
			},
			//筛选
			screening(){
				uni.navigateTo({
					url: '/pagesB/screening/screening'
				})
			},
			//切换附近与最新
			curren(id){
				this.listQurey.type = id
				this.current = id
				this.leftList = []
				this.listQurey.pageNum = 1
				this.getData()
			},
			_getTabbarHeight() {
				uni.createSelectorQuery().select('.height').boundingClientRect(item => {
					this.topHeight = item.height
				}).exec()
			},
			//滑动事件
			swiper(e) {
				console.log(e)
				this.current = e.detail.current
			},
			//职位列表点击进入详情页
			linkDetail(item){
				uni.setStorageSync('pageNum',item.positionListId)
				uni.navigateTo({
					url: '/pagesB/positionDetail/positionDetail'
				})
				
			},
			//收藏点击回传事件
			chan1(e) {
				console.log(e)
				this.leftList.forEach(item => {
					if (item.positionListId == e.positionListId) {
						item.collectionStatus = !item.collectionStatus
					}
				})
			},
			chan2(e) {
				console.log(e)
				this.rightList.forEach(item => {
					if (item.positionListId == e.positionListId) {
						item.collectionStatus = !item.collectionStatus
					}
				})
			},
			//滚动事件
			scroll() {
	
			},
			
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		//padding-bottom: env(safe-area-inset-bottom);

		.tabbar {
			background: linear-gradient(135deg, #1C79F8, #0265EB); //顶部导航背景色
			//position: relative;

			.tabbar-title {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
		}

		.content {
			height: 100%;
			.height {
				position: relative;
				height: 100%;
				.position {
					.title {
						.text {
							font-weight: bold;
							color: #333333;
							font-size: 36rpx;
						}

						.icon {
							width: 40rpx;
							height: 5rpx;
							background: #0265EB;
							border-radius: 3px;
						}
					}

					.screening {
						width: 100rpx;
						height: 46rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
						padding: 0 10rpx;

						.text {
							font-weight: 400;
							color: #666666;
							font-size: 28rpx;
							display: inline-block;
						}

						.icon {
							height: 100%;
							display: inline-block;

							image {
								width: 10rpx;
								height: 10rpx;
								border: 1rpx solid #000000;
								vertical-align: bottom;
							}
						}
					}
				}
			}

			.recruitment {

				.swiper {
					// height: 100vh;
					height: 100%;
					.scroll-view {
						height: 100%;

						.list {}
					}
				}
			}
		}
	}
</style>

